<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>관리자 모니터링</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/perfect-scrollbar.css" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/perfect-scrollbar.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body id="black">
	<div id="wrap" class="admin">
		<!-- header START -->
		<div id="header">		
			<div class="warp_tab">
				<ul>
					<li><span class="btn"><button type="submit">관리자</button></span></li>
					<li><span class="btn"><button type="submit">로그아웃</button></span></li>
					<li><span class="btn"><button type="submit">비밀번호 변경</button></span></li>
					<li><span class="btn"><button type="submit">쪽지함</button></span></li>
				</ul>
			</div>			
			<!-- 버튼 아이콘의 경우 비활성화:disable/ 활성화:active 클래스를 추가한다. 마우스 오버시는 js로 처리함 -->
			<div class="wrap_navi">
				<ul>
					<li><a href="#" class="monitor acitve">모니터링</a></li>
					<li><a href="#" class="graph disable">상담현황</a></li>
					<li><a href="#" class="stat">상담통계</a></li>
					<li><a href="#" class="call">해피콜현황</a></li>
					<li><a href="#" class="mng">상담원관리</a></li>
					<li><a href="#" class="type">상담유형관리</a></li>
					<li><a href="#" class="script">스크립트</a></li>
					<li><a href="#" class="notice">공지시항</a></li>
					<li><a href="#" class="sms">SMS</a></li>
				</ul>
			</div>
		</div>
		<!-- header  END  -->
		<!-- 콘텐츠 START -->
		<div id="admin_content">
			<!-- 좌측 현황 리스트 START -->
			<div class="left_status">
				<div class="current wide_box">
					<div class="date">10.24 (수)</div>
					<div class="time">17:00</div>
				</div>
				<div class="working_data small_box">
					<ul>
						<li><em>총인입</em><div>334</div></li>
						<li><em>응대호</em><div>334</div></li>
						<li><em>포기호</em><div>334</div></li>
						<li><em>응대율</em><div>98</div></li>
						<li><em>대기율 </em><div>334</div></li>
					</ul>
				</div>
				<div class="wide_box wait_data">
					<div class="date">대기고객</div>
					<div class="time">100000</div>
				</div>
				<div class="worker_data small_box">
					<ul>
						<li><em>총인원 </em><div>10</div></li>
						<li><em>로그인 </em><div>10</div></li>
						<li><em>대기</em><div>334</div></li>
						<li><em>휴식</em><div>98</div></li>
						<li><em>후처리 </em><div>334</div></li>
						<li><em>이석 </em><div>334</div></li>
						<li><em>콜백 </em><div>334</div></li>
					</ul>
				</div>
			</div>
			<!-- 좌측 현황 리스트 END -->
			

			<div class="right_content"  id="Default">
				<!-- 상담원 상태 START -->
				<!-- 상담원 리스트의 경우 8개단위로 묶음 처리 8개 초과시 2번째 줄바꿈 16초과시 좌우 스크롤 발생 -->
				<!-- 상담원 상태 구분자 클래스명 로그아웃:logout / 대기:stay / 휴식:rest  -->
				<div class="worker_status">
					<div class="custom_scr">
					<div class="wrap_scr" id="Default">
						<div class="wrap_list">
						<!-- 상담원 리스트 START -->
						<div class="list set_item1">							
							<div class="worker logout">
								<strong>로그아웃</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">을지문덕 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker stay">
								<strong>대기</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">허균 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>
							<div class="worker logout">
								<strong>로그아웃</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">을지문덕 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker stay">
								<strong>대기</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">허균 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>
								<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>
								<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>
								<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>							
							<div class="worker rest">
								<strong>휴식</strong>
								<div class="time">00:00:99</div>
								<div class="worker_info">홍길동 &nbsp;&nbsp; 0011</div>
							</div>
						</div>
						<!-- 상담원 리스트 END -->
						</div>						
					</div>
					</div>
				</div>
				<!-- 상담원 상태 END -->
				
				<!-- 그래프 영역 START --> <!-- 그래프 영역 -->
				<div class="wrap_graph" style="border:1px solid #ccc; height:400px; margin-top:6px"> 
					
				</div>
				<!-- 그래프 영역 END -->
			</div>
			<script type="text/javascript">
				jQuery(document).ready(function ($) {
				"use strict";
				$('#Default').perfectScrollbar();
				});
			</script>
			<div class="cb"></div>
		</div>
		<!-- 콘텐츠 END -->
	</div>
</body>
</html>